<template>
  <div class="">
    <div class="list-group pull-left">
      <a href="javascript:;" class="list-group-item"   @click="changeShow(index)" v-for="(item,index) in arr" :class="{active:active==index}">{{item.title}}</a>
    </div>
    <div class="pull-left arr-content text-left">
        {{str}}
    </div>
  </div>

</template>
<script>
  export default{
      props:{
          arr:{
              type:Array
          },
          active:{
              type:Number
          }
      },
    data(){
          return{
            str:""
          }

    },
    methods:{
      changeShow(index){
        this.active = index;
        this.str=this.arr[index].str;
      },
    },
    mounted(){
      this.str=this.arr[0].str;
    }
  }
</script>
<style scoped="">
  .arr-content{
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    width: 700px;
    height: 100px;
    margin-left: 50px;
  }
  .list-group a{
    width: 200px;
  }
</style>
